<template>
    <div>
        <basic-container v-show="!showDetail">
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="流失客户" name="first">
                    <customerChurn @showDetail="changeShow" />
                </el-tab-pane>
                <el-tab-pane label="未交流客户" name="second">
                    <customerCommunicate @showDetail="changeShow" v-if="activeName == 'second'" />
                </el-tab-pane>
            </el-tabs>
        </basic-container>
        <basic-container v-show="showDetail">
            <el-page-header @back="goBack" content="查看详情"></el-page-header>
        </basic-container>
        <basic-container v-show="showDetail">
            <el-table
                :header-cell-style="{
                    background: 'rgb(255, 191, 191)',
                    color: 'rgb(44,44,44)'
                }"
                :data="customerTableData"
                style="width: 100%;margin:20px 0"
                v-loading="customerTableloading"
                v-show="tableType === 1"
            >
                <el-table-column label="序号" width="100" align="center">
                    <template slot-scope="scope">{{ (page.current - 1) * page.size + scope.$index + 1 }}</template>
                </el-table-column>
                <el-table-column label="客户信息" align="left">
                    <template slot-scope="scope">
                        <i class="el-icon-user-solid"></i>
                        <span class="madp-common-ml">{{ scope.row.contactName }}</span>
                        <span v-if="scope.row.contactGender == 1" class="madp-common-ml">♂</span>
                        <span v-else-if="scope.row.contactGender == 2" class="madp-common-ml">♀</span>
                        <span v-else class="madp-common-ml">-</span>
                    </template>
                </el-table-column>
                <el-table-column prop="employeeName" label="所属成员" align="center"></el-table-column>
                <el-table-column prop="lossTime" label="流失时间" align="center"></el-table-column>
                <el-table-column prop="buildTime" label="添加时间" align="center"></el-table-column>
                <el-table-column prop="latestChatTime" label="上次对话时间" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.latestChatTime">{{ scope.row.latestChatTime }}</span>
                        <span v-else>——</span>
                    </template>
                </el-table-column>
                <el-table-column prop="addTime" label="添加员工时长/天" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.addTime }}天</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="tochatList(scope.row)">聊天记录</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-table
                :header-cell-style="{
                    background: 'rgb(255, 191, 191)',
                    color: 'rgb(44,44,44)'
                }"
                :data="customerTableData"
                style="width: 100%;margin:20px 0"
                v-loading="customerTableloading"
                v-show="tableType === 2"
            >
                <el-table-column label="序号" align="center">
                    <template slot-scope="scope">{{ (page.current - 1) * page.size + scope.$index + 1 }}</template>
                </el-table-column>
                <el-table-column prop="contactName" label="客户信息" align="center">
                    <template slot-scope="scope">
                        <i class="el-icon-user-solid"></i>
                        <span class="madp-common-ml">{{ scope.row.contactName }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="employeeName" label="所属成员" align="center">
                    <template slot-scope="scope">{{ scope.row.employeeName }}</template>
                </el-table-column>
                <el-table-column prop="tagList" label="所属标签" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.tagList">
                            <el-tag class="madp-taglist" v-for="(item, idx) in scope.row.tagList" :key="idx">{{ item.tagName }}</el-tag>
                        </div>
                        <div v-else>——</div>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="添加时间" align="center">
                    <template slot-scope="scope">{{ scope.row.createTime }}</template>
                </el-table-column>
                <el-table-column prop="endTime" label="上次对话时间" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.endTime">
                            {{ scope.row.endTime }}
                        </span>
                        <span v-else>——</span>
                    </template>
                </el-table-column>
                <el-table-column prop="day" label="未交流时长" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.day }}天</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="chatRecords(scope.row)">聊天记录</el-button>
                        <el-button type="text" @click="remindDialog(scope.row)">提醒</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                class="madp-pagination"
                @size-change="handlesize"
                @current-change="handlePageCurrent"
                :current-page="page.current"
                :page-sizes="[10, 20, 30, 50, 100]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
            ></el-pagination>
        </basic-container>
        <!-- 聊天记录 -->
        <el-dialog :title="chat == 1 ? '流失客户聊天记录' : '未交流客户聊天记录'" :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false">
            <div class="madp-box">
                <div class="madp-right-box">
                    <el-tabs type="border-card" v-model="activeTabType" @tab-click="changeTabType">
                        <el-tab-pane v-for="item in fileTypeList" :key="item.type" :label="item.name" :name="item.type">
                            <el-date-picker
                                v-model="value1"
                                v-if="chatList.length > 0"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"
                                :picker-options="{
                                    disabledDate(time) {
                                        return time.getTime() > Date.now();
                                    }
                                }"
                                @change="changeDate"
                            ></el-date-picker>
                            <div class="madp-center-empty" v-if="chatList.length == 0">
                                <img class="madp-no-link" src="/img/nodata.png" alt />
                                <div>暂无数据</div>
                            </div>
                            <div class="madp-chatInfo" v-for="(it, i) in chatList" :key="i">
                                <div>
                                    <div>
                                        <p :class="it.isCurrentUser == 0 ? 'madp-chat-link' : 'madp-chat-link madp-chat-right'">
                                            <span v-if="it.isCurrentUser == 0">
                                                <span class="madp-chatInfo-name">{{ it.name }}</span>
                                                <span class="madp-chatInfo-time">{{ it.msgDataTime }}</span>
                                            </span>
                                            <span v-else>
                                                <span class="madp-chatInfo-etime">{{ it.msgDataTime }}</span>
                                                <span class="madp-chatInfo-ename">{{ it.name }}</span>
                                            </span>
                                        </p>
                                        <div v-if="it.type == 1" :class="it.isCurrentUser == 0 ? '' : 'madp-chat-right'">
                                            <p :class="it.isCurrentUser == 0 ? 'madp-chatInfo-chat' : 'madp-chatInfo-echat'">{{ it.content.content }}</p>
                                        </div>
                                        <div v-if="it.type == 2" :class="it.isCurrentUser == 0 ? 'madp-chat-box' : 'madp-chat-box madp-chatInfo-eimg'">
                                            <img
                                                :src="it.content.ossPath"
                                                class="madp-chatInfo-img"
                                                @click="
                                                    isLargeImgShow = true;
                                                    largeImgUrl = it.content.ossPath;
                                                "
                                            />
                                        </div>
                                        <div v-if="it.type == 13" :class="it.isCurrentUser == 0 ? '' : 'madp-chat-right'">
                                            <p :class="it.isCurrentUser == 0 ? 'madp-chat-link madp-chat-color' : 'madp-chat-link madp-chat-color'">
                                                <a :href="it.content.link_url" target="_blank">{{ it.content.link_url }}</a>
                                            </p>
                                        </div>
                                        <div v-if="it.type == 4" :class="it.isCurrentUser == 0 ? '' : 'madp-right-audio'">
                                            <audio :src="it.content.ossPath" controls="controls" class="madp-chatInfo-audio"></audio>
                                        </div>
                                        <div :class="it.isCurrentUser == 0 ? '' : 'madp-chatInfo-eimg'" v-if="it.type == 5">
                                            <video :src="it.content.ossPath" controls="controls" class="madp-chatInfo-img"></video>
                                        </div>
                                        <div v-if="it.type == 7" :class="it.isCurrentUser == 0 ? '' : 'madp-right-audio'">
                                            <!-- 音频 -->
                                            <div v-if="it.content.fileext == 'mp3'">
                                                <audio :src="it.content.ossPath" controls="controls" class="madp-chatInfo-audio"></audio>
                                            </div>
                                            <!-- 视频 -->
                                            <div v-if="it.content.fileext == 'mp4'">
                                                <video :src="it.content.ossPath" controls="controls" class="madp-chatInfo-img"></video>
                                            </div>
                                            <div class="madp-file" v-else>
                                                <div>
                                                    <p>{{ it.content.filename }}</p>
                                                    <p>{{ (it.content.filesize / 1024).toFixed(2) }}kb</p>
                                                </div>
                                                <a :href="it.content.ossPath" target="_blank">
                                                    <img src="/img/xlsx.png" v-show="it.content.fileext == 'xlsx'" class="madp-chatInfo-file" />
                                                    <img src="/img/pdf.jpg" v-show="it.content.fileext == 'pdf'" class="madp-chatInfo-file" />

                                                    <img src="/img/ppt.jpg" v-show="it.content.fileext == 'pptx'" class="madp-chatInfo-file" />

                                                    <img src="/img/txt.png" v-show="it.content.fileext == 'txt'" class="madp-chatInfo-file" />

                                                    <img src="/img/word.png" v-show="it.content.fileext == 'docx'" class="madp-chatInfo-file" />

                                                    <img src="/img/csv.png" v-show="it.content.fileext == 'csv'" class="madp-chatInfo-file" />
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { lossList, queryChatRecords, contactList } from '@/api/customer-churn/customer-churn-list';
import { chatRecords } from '@/api/enterprise/session-archiving';
import customerChurn from './customer-churn.vue';
import customerCommunicate from './customer-communicate.vue';
export default {
    name: 'madp-customer-churn-list',
    components: {
        customerChurn,
        customerCommunicate
    },
    data() {
        return {
            // 选项卡显示
            activeName: 'first',
            // 显示详情
            showDetail: false,
            // 客户表格
            customerTableData: [],
            // 表格loading
            customerTableloading: false,
            // 表格类型
            tableType: 1,
            // 分页
            page: {
                current: 1,
                size: 10,
                total: 0
            },
            chat: 1,
            // 弹窗开关
            dialogVisible: false,
            // 聊天对象
            chatForm: {},
            value1: '',
            // 聊天记录
            chatList: [],
            activeTabType: '0',
            // 类型list
            fileTypeList: [
                {
                    name: '全部',
                    type: '0'
                },
                {
                    name: '文本',
                    type: '1'
                },
                {
                    name: '图片',
                    type: '2'
                },
                {
                    name: '链接',
                    type: '13'
                },
                {
                    name: '语音',
                    type: '4'
                },
                {
                    name: '视频',
                    type: '5'
                },
                {
                    name: '文件',
                    type: '7'
                }
            ],
            // 成员id
            employeeId: ''
        };
    },
    methods: {
        // 返回
        goBack() {
            this.showDetail = false;
        },
        // 更新视图
        changeShow(val) {
            this.showDetail = true;
            this.tableType = val.type;
            this.page.current = 1;
            this.page.size = 10;
            this.page.total = 0;
            this.employeeId = val.type == 1 ? val.employeeId : val.employeeId;
            this.getTableData();
        },
        // 获取表格数据
        getTableData(data) {
            if (!data) {
                this.page.current = 1;
                this.page.size = 10;
            }
            let obj = {
                current: this.page.current,
                size: this.page.size,
                employeeId: this.employeeId
            };
            this.customerTableloading = true;
            if (this.tableType == 1) {
                lossList(obj)
                    .then((res) => {
                        this.customerTableloading = false;
                        if (res.data && res.data.code === 0) {
                            this.customerTableData = res.data.data.records;
                            this.page.total = res.data.data.total;
                        }
                    })
                    .catch(() => {
                        this.customerTableloading = false;
                    });
            } else {
                contactList(obj)
                    .then((res) => {
                        this.customerTableloading = false;
                        if (res.data && res.data.code === 0) {
                            this.customerTableData = res.data.data.records;
                            this.page.total = res.data.data.total;
                        }
                    })
                    .catch(() => {
                        this.customerTableloading = false;
                    });
            }
        },
        // 分页
        handlesize(val) {
            this.page.size = val;
            this.getTableData(1);
        },
        // 分页
        handlePageCurrent(val) {
            this.page.current = val;
            this.getTableData(1);
        },
        //流失客户>聊天记录
        tochatList(row) {
            this.chat = 1;
            this.dialogVisible = true;
            this.chatForm = row;
            this.getLossCustomerChatList();
        },
        //查询流失客户聊天记录
        getLossCustomerChatList(params) {
            let query = Object.assign(
                {
                    userId: this.chatForm.contactId,
                    toUserId: this.chatForm.employeeId,
                    toUserType: 0,
                    dateTimeStart: this.value1[0],
                    dateTimeEnd: this.value1[1]
                },
                params
            );
            chatRecords(query).then((res) => {
                if (res.data && res.data.code === 0) {
                    this.chatList = res.data.data.records;
                }
            });
        },
        //查询未交流客户聊天记录
        getChatList(params) {
            let query = Object.assign(
                {
                    contactId: this.chatForm.contactId,
                    employeeId: this.chatForm.employeeId,
                    time: this.chatForm.day,
                    startTime: this.value1[0],
                    endTime: this.value1[1]
                },
                params
            );
            queryChatRecords(query).then((res) => {
                if (res.data && res.data.code === 0) {
                    this.chatList = res.data.data.records;
                }
            });
        },
        // 获取聊天记录
        chatRecords(row) {
            this.chat = 0;
            this.chatForm = row;
            this.getChatList();
            this.dialogVisible = true;
        },
        // 更新tab类型
        changeTabType() {
            if ((this.chat = 1)) {
                this.getLossCustomerChatList({ type: this.activeTabType });
            } else {
                this.getChatList({ type: this.activeTabType });
            }
        }
    }
};
</script>
